{{ 'section-main-product.css' | asset_url | stylesheet_tag }}
{{ 'section-featured-product.css' | asset_url | stylesheet_tag }}
{{ 'component-accordion.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-rte.css' | asset_url | stylesheet_tag }}
{{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}

<link rel="stylesheet" href="{{ 'component-deferred-media.css' | asset_url }}" media="print" onload="this.media='all'">

{%- assign product = section.settings.product -%}

{%- assign first_3d_model = product.media | where: "media_type", "model" | first -%}
{%- if first_3d_model -%}
  {{ 'component-product-model.css' | asset_url | stylesheet_tag }}
  <link id="ModelViewerStyle" rel="stylesheet" href="https://cdn.shopify.com/shopifycloud/model-viewer-ui/assets/v1.0/model-viewer-ui.css" media="print" onload="this.media='all'">
  <link id="ModelViewerOverride" rel="stylesheet" href="{{ 'component-model-viewer-ui.css' | asset_url }}" media="print" onload="this.media='all'">
{%- endif -%}

<section class="{% if section.settings.secondary_background %}background-secondary{% else %}{% endif %}">
  <div class="tenways-product">
    <div class="page-width">
      <div class="featured-product product grid grid--1-col {% if product.media.size > 0 %}grid--2-col-tablet{% else %}product--no-media{% endif %}">
        <div class="grid__item product__media-wrapper">
          <a class="skip-to-content-link button visually-hidden" href="#ProductInfo-{{ section.id }}">
            {{ "accessibility.skip_to_product_info" | t }}
          </a>
          <div class="product__media-list">
            {%- if product.selected_or_first_available_variant.featured_media != null -%}
              {%- assign media = product.selected_or_first_available_variant.featured_media -%}
              <div class="product__media-item" data-media-id="{{ section.id }}-{{ media.id }}">
                {% render 'tenways-product-thumbnail', media: media, position: 'featured', loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: false %}
              </div>
            {%- endif -%}
            {%- liquid
              assign media_to_render = product.featured_media.id
              for variant in product.variants
                assign media_to_render = media_to_render | append: variant.featured_media.id | append: ' '
              endfor
            -%}
            {%- for media in product.media -%}
              {%- if media_to_render contains media.id and media.id != product.selected_or_first_available_variant.featured_media.id -%}
                <div class="product__media-item" data-media-id="{{ section.id }}-{{ media.id }}">
                  {% render 'tenways-product-thumbnail', media: media, position: forloop.index, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: false %}
                </div>
              {%- endif -%}
            {%- endfor -%}
          </div>
          {%- if first_3d_model -%}
            <button
              class="button button--full-width product__xr-button"
              type="button"
              aria-label="{{ 'products.product.xr_button_label' | t }}"
              data-shopify-xr
              data-shopify-model3d-id="{{ first_3d_model.id }}"
              data-shopify-title="{{ product.title | escape }}"
              data-shopify-xr-hidden
            >
              {% render 'icon-3d-model' %}
              {{ 'products.product.xr_button' | t }}
            </button>
          {%- endif -%}
        </div>
        <div class="transcy-click-currency product__info-wrapper grid__item">
          <div id="ProductInfo-{{ section.id }}" class="product__info-container">
            {%- assign product_form_id = 'product-form-' | append: section.id -%}
  
            {%- for block in section.blocks -%}
              {%- case block.type -%}
              {%- when 'text' -%}
                <p class="product__text{% if block.settings.text_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.text_style == 'subtitle' %} subtitle{% endif %}" {{ block.shopify_attributes }}>
                  {{- block.settings.text -}}
                </p>
               
                <div class="product_title">
                   <div class="title">
                      {{- block.settings.richtext -}}                 
                   </div>
                  
                  
                  {%- if block.settings.p_des != blank -%}
                  <div class="tenways-p_des">
                      {{ block.settings.p_des }}
                 </div> 
              
              {%- else -%} 
              
              <div class="discount-img">
              
             {%- if block.settings.image != blank -%}   
               <img
                          srcset="
                         {%- if block.settings.image.width >= 375 -%}{{ block.settings.image | img_url: '375x' }} 375w,{%- endif -%}
                         {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
                         {%- if block.settings.image.width >= 1780 -%}{{ block.settings.image | img_url: '1780x' }} 1780w,{%- endif -%}
                         {%- if block.settings.image.width >= 2000 -%}{{ block.settings.image | img_url: '2000x' }} 2000w,{%- endif -%}
                         {%- if block.settings.image.width >= 3000 -%}{{ block.settings.image | img_url: '3000x' }} 3000w,{%- endif -%}
                         {%- if block.settings.image.width >= 3840 -%}{{ block.settings.image | img_url: '3840x' }} 3840w,{%- endif -%}"
                         sizes="{% if block.settings.image_2 != blank and block.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image_2 != blank %}50vw{% else %}100vw{% endif %}"
                         src="{{ block.settings.image | img_url: '1500x' }}"
                         loading="lazy"
                         alt="{{ block.settings.image.alt | escape }}"
                         width="{{ block.settings.image.width }}"
                         height="{{ block.settings.image.height }}"
                         >
              {%- endif -%} 
              </div>
              
                 {%- endif -%} 
                  

                  {%- if product != blank -%}
                    <div {{ block.shopify_attributes }}>
                      {%- form 'product', product -%}
                        <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
                        {{ form | payment_terms }}
                      {%- endform -%}
                    </div>
                  {%- endif -%}
                </div>
              {%- when 'title' -%}
                <h2 class="h1 product__title" {{ block.shopify_attributes }}>
                  {%- if product.title != blank -%}
                    {{ product.title | escape }}
                  {%- else -%}
                    {{ 'onboarding.product_title' | t }}
                  {%- endif -%}
                </h2>
              {%- when 'price' -%}
                <div class="no-js-hidden tenways-price" id="price-{{ section.id }}" {{ block.shopify_attributes }}>
                  {%- render 'price', product: product, use_variant: true, show_badges: true, price_class: 'price--large' -%}
                  {%- if block.settings.shipping != blank -%}
                  <div class="tenways-shipping">
                    <!-- {% render 'icon-shipping' %}  -->
                    {{ block.settings.shipping }}
                  </div>  
               {%- endif -%}
                </div>
                <!-- {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
                  <div class="product__tax caption rte">
                    {%- if shop.taxes_included -%}
                      {{ 'products.product.include_taxes' | t }}
                    {%- endif -%}
                    {%- if shop.shipping_policy.body != blank -%}
                      {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
                    {%- endif -%}
                  </div>
                {%- endif -%} -->
                {%- if product != blank -%}
                  <div {{ block.shopify_attributes }}>
                    {%- form 'product', product -%}
                      <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
                      {{ form | payment_terms }}
                    {%- endform -%}
                  </div>
                {%- endif -%}


                <div class="free">
                  {%- if section.settings.show_cart_accessories -%}
                  
                  {%- liquid
    assign products_to_display = section.settings.collection.all_products_count
    
    if section.settings.collection.all_products_count > section.settings.products_to_show
    assign products_to_display = section.settings.products_to_show
    assign more_in_collection = true
    endif
    -%}
    <div class="cart_collection collection{% if section.settings.swipe_on_mobile == true and section.settings.collection.all_products_count > 2 and section.settings.products_to_show > 2 %} page-width-desktop{% endif %}">
    <div class="free-title{% if section.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} title-wrapper--self-padded-tablet-down{% endif %}">
    <h2>{{ section.settings.collection_title | escape }} <span> {% render 'icon-free' %} </span> </h2>
    
    {%- if section.settings.show_view_all and section.settings.swipe_on_mobile and more_in_collection -%}
    <a href="{{ section.settings.collection.url }}" class="link underlined-link large-up-hide">{{ 'sections.featured_collection.view_all' | t }}</a>
    {%- endif -%}
    </div>
    
    <slider-component class="slider-mobile-gutter">
      
      {%- if section.settings.text_des != blank -%}
          <div class="fr_list">{{ section.settings.text_des }}</div>
        {%- endif -%}
   
    <ul class="grid grid--2-col product-grid{% if products_to_display == 4 or section.settings.collection == blank %} grid--2-col-tablet grid--4-col-desktop{% else %} grid--3-col-tablet{% endif %}{% if products_to_display > 5 %} grid--one-third-max grid--4-col-desktop grid--quarter-max{% endif %}{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider slider--tablet grid--peek{% endif %}{% if section.settings.show_view_all == false or section.settings.collection.products.size < section.settings.products_to_show %} negative-margin{% endif %}{% if section.settings.show_view_all and section.settings.collection.products.size > section.settings.products_to_show %} negative-margin--small{% endif %}" role="list">
    {%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
    <li class="grid__item{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider__slide{% endif %}">
      {% render 'product-card-free',
       product_card_product: product,
       media_size: section.settings.image_ratio,
       show_secondary_image: section.settings.show_secondary_image,
       add_image_padding: section.settings.add_image_padding,
       show_vendor: section.settings.show_vendor,
       show_image_outline: section.settings.show_image_outline,
       show_rating: section.settings.show_rating,
       free: section.settings.free
     %}
    </li>
    {%- else -%}
    {%- for i in (1..4) -%}
     <li class="grid__item">
       {% render 'product-card-placeholder' %}
        {%- if section.settings.free != blank -%}
                     <div class="free_p">{{ section.settings.free | escape }}</div>
                  {%- endif -%}
     </li>
    {%- endfor -%}
    {%- endfor -%}
    </ul>
      
<!--          {%- if section.settings.text != blank -%}
          <div class="fr_rte">{{ section.settings.text }}</div>
        {%- endif -%} -->
      
    {%- if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 -%}
    <div class="slider-buttons no-js-hidden{% if section.settings.collection.all_products_count < 4 %} medium-hide{% endif %}{% if section.settings.collection.all_products_count < 3 %} small-hide{% endif %}">
    <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'accessibility.previous_slide' | t }}">{% render 'icon-caret' %}</button>
    <div class="slider-counter caption">
     <span class="slider-counter--current">1</span>
     <span aria-hidden="true"> / </span>
     <span class="visually-hidden">{{ 'accessibility.of' | t }}</span>
     <span class="slider-counter--total">{{ products_to_display }}</span>
    </div>
    <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'accessibility.next_slide' | t }}">{% render 'icon-caret' %}</button>
    </div>
    {%- endif -%}
    </slider-component>
    
    {%- if section.settings.show_view_all and more_in_collection -%}
    <div class="center{% if section.settings.swipe_on_mobile %} small-hide medium-hide{% endif %}">
    <a href="{{ section.settings.collection.url }}"
    class="button"
    aria-label="{{ 'sections.featured_collection.view_all_label' | t: collection_name: section.settings.collection.title }}"
    >
    {{ 'sections.featured_collection.view_all' | t }}
    </a>
    </div>
    {%- endif -%}
    </div>
                  
                    {%- endif -%}
               </div>

              {%- when 'quantity_selector' -%}
                <div class="product-form__input product-form__quantity" {{ block.shopify_attributes }}>
                  <label class="form__label" for="Quantity-{{ section.id }}">
                    {{ 'products.product.quantity.label' | t }}
                  </label>
                  <quantity-input class="quantity">
                    <button class="quantity__button no-js-hidden" name="minus" type="button">
                      <span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: product.title | escape }}</span>
                      {% render 'icon-minus' %}
                    </button>
                    <input class="quantity__input"
                        type="number"
                        name="quantity"
                        id="Quantity-{{ section.id }}"
                        min="1"
                        value="1"
                        form="product-form-{{ section.id }}"
                      >
                    <button class="quantity__button no-js-hidden" name="plus" type="button">
                      <span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: product.title | escape }}</span>
                      {% render 'icon-plus' %}
                    </button>
                  </quantity-input>
                </div>
              {%- when 'share' -%}
                <script src="{{ 'share.js' | asset_url }}" defer="defer"></script>
                <share-button class="share-button" {{ block.shopify_attributes }}>
                  <button class="share-button__button hidden">
                    {% render 'icon-share' %}
                    {{ block.settings.share_label | escape }}
                  </button>
                  <details>
                    <summary class="share-button__button">
                      {% render 'icon-share' %}
                      {{ block.settings.share_label | escape }}
                    </summary>
                    <div id="Product-share-{{ section.id }}" class="share-button__fallback motion-reduce">
                      <div class="field">
                        <span id="ShareMessage-{{ section.id }}" class="share-button__message hidden" role="status">
                        </span>
                        <input type="text"
                              class="field__input"
                              id="url"
                              value="{{ shop.url | append: product.url }}"
                              placeholder="{{ 'general.share.share_url' | t }}"
                              onclick="this.select();"
                              readonly
                        >
                        <label class="field__label" for="url">{{ 'general.share.share_url' | t }}</label>
                      </div>
                      <button class="share-button__close hidden no-js-hidden">
                        {% render 'icon-close' %}
                        <span class="visually-hidden">{{ 'general.share.close' | t }}</span>
                      </button>
                      <button class="share-button__copy no-js-hidden">
                        {% render 'icon-clipboard' %}
                        <span class="visually-hidden">{{ 'general.share.copy_to_clipboard' | t }}</span>
                      </button>
                    </div>
                  </details>
                </share-button>
                      
              {%- when 'variant_picker' -%}

              {%- unless product.has_only_default_variant -%}
              {%- if block.settings.picker_type == 'button' -%}
                <variant-radios class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" data-update-url="false" {{ block.shopify_attributes }}>
                  {%- for option in product.options_with_values -%}
                
                  {%- assign color_label = 'Color,Kleur,color,Colour,Couleur,colore,Colore,Farbe,farbe,색,色,färg,farve' | split: ',' -%}
                  {%- assign size_label = 'Size,Maat,Dimensioni,Taille,Größe,Tamaño' | split: ',' -%}
                  {%- assign deliver_label = 'Deliver to,Bezorgen aan,Spedire a,Livrer à,Liefern an,Enviar a' | split: ',' -%}
                  {%- assign downcased_option = option.name | downcase -%}
                 
                  {%- assign file_extension = 'png' -%}
                                   
                  {%- if color_label   contains  option.name -%}
                   
                      <fieldset class="js product-form__input">
                    
                          <legend class="form__label"><span id="color_label"> {{ option.selected_value }} </span></legend>
                                  {%- for value in option.values -%}
                                
                                    <input type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
                                          name="{{ option.name }}"
                                          value="{{ value | escape }}"
                                          form="product-form-{{ section.id }}"
                                          {% if option.selected_value == value %}checked{% endif %}
                                    >
                                    <label class="cs_label" for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
                                      <img loading="lazy" class="cs_img" src="{{ value | handle | append: '.' | append: file_extension | asset_url  }}" alt="tenways_ebike" width="37" height="37" />
                                    </label>
                                  {%- endfor -%}
                      </fieldset>
                                                
                      {% elsif size_label contains  option.name %}
                    <span id="size_label">{{ option.selected_value }}</span>
                     <fieldset class="js product-form__input size" id="size_on">
                       <legend data-size="XL" id="size_label1" class="form__label">{{ option.name }} - {{ section.settings.size_label1 }} </legend>
                        <legend data-size="L" id="size_label2" class="form__label">{{ option.name }} - {{ section.settings.size_label2 }}</legend>
                        <legend data-size="M" id="size_label3" class="form__label">{{ option.name }} - {{ section.settings.size_label3 }}</legend>
                        <legend data-size="S" id="size_label4" class="form__label">{{ option.name }} - {{ section.settings.size_label4 }}</legend>
                      {%- for value in option.values -%}
                        <input type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
                              name="{{ option.name }}"
                              value="{{ value | escape }}"
                              form="product-form-{{ section.id }}"
                              {% if option.selected_value == value %}checked{% endif %}
                        >
                        <label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
                          {{ value }}
                        </label>
                      {%- endfor -%}
                     </fieldset> 

                      {% else deliver_label contains  option.name %}
  
                      <fieldset class="js product-form__input">
                                  <legend class="form__label">{{ option.name }} 
                                    <span class="tenways-tip">{% render 'tenways-tip' %}</span>
                                    <div class="field-tooltip-content">
                                      {{ product.metafields.my_fields.deliver }}
                                    </div>
                                   </legend>
                                  {%- for value in option.values -%}
                                    <input type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
                                          name="{{ option.name }}"
                                          value="{{ value | escape }}"
                                          form="product-form-{{ section.id }}"
                                          {% if option.selected_value == value %}checked{% endif %}
                                    >
                                    <label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
                                      {{ value }}
                                    </label>
                                  {%- endfor -%}
                     </fieldset>     
                     
                     
                  {%- endif -%}     
                  {%- endfor -%}
                  <script type="application/json">
                    {{ product.variants | json }}
                  </script>
                </variant-radios>
              {%- else -%}
                <variant-selects class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" data-update-url="false" {{ block.shopify_attributes }}>
                  {%- for option in product.options_with_values -%}
                    <div class="product-form__input product-form__input--dropdown">
                      <label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
                        {{ option.name }}
                      </label>
                      <div class="select">
                        <select id="Option-{{ section.id }}-{{ forloop.index0 }}"
                          class="select__select"
                          name="options[{{ option.name | escape }}]"
                          form="product-form-{{ section.id }}"
                        >
                          {%- for value in option.values -%}
                            <option value="{{ value | escape }}" {% if option.selected_value == value %}selected="selected"{% endif %}>
                              {{ value }}
                            </option>
                          {%- endfor -%}
                        </select>
                        {% render 'icon-caret' %}
                      </div>
                    </div>
                  {%- endfor -%}

                  <script type="application/json">
                    {{ product.variants | json }}
                  </script>
                </variant-selects>
              {%- endif -%}
            {%- endunless -%}

            <noscript class="product-form__noscript-wrapper-{{ section.id }}">
              <div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %}">
                <label class="form__label" for="Variants-{{ section.id }}">{{ 'products.product.product_variants' | t }}</label>
                <div class="select">
                  <select name="id" id="Variants-{{ section.id }}" class="select__select" form="product-form">
                    {%- for variant in product.variants -%}
                      <option
                        {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %}
                        {% if variant.available == false %}disabled{% endif %}
                        value="{{ variant.id }}"
                      >
                        {{ variant.title }}
                        {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
                        - {{ variant.price | money | strip_html }}
                      </option>
                    {%- endfor -%}
                  </select>
                  {% render 'icon-caret' %}
                </div>
              </div>
            </noscript>
              
            



              {%- when 'buy_buttons' -%}
                <div {{ block.shopify_attributes }}>
                  {%- if product != blank -%}
                    <product-form class="product-form">
                      <div class="product-form__error-message-wrapper" role="alert" hidden>
                        <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-error" viewBox="0 0 13 13">
                          <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
                          <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
                          <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
                          <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
                        </svg>
                        <span class="product-form__error-message"></span>
                      </div>
  
                      {%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
                        <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
                        <div class="product-form__buttons">
                          <button
                            type="submit"
                            name="add"
                            class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}"
                          {% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}
                          >
                              <span>
                                {%- if product.selected_or_first_available_variant.available -%}
                                  {{ 'products.product.add_to_cart' | t }}
                                {%- else -%}
                                  {{ 'products.product.sold_out' | t }}
                                {%- endif -%}
                              </span>
                              <div class="loading-overlay__spinner hidden">
                                <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                                  <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                                </svg>
                              </div>
                          </button>
                          <a class="product-form__order button" href="{{ section.settings.button_link }}"><span>{{ section.settings.more }}</span></a>
                        </div>
                      {%- endform -%}
                    </product-form>
                  {%- else -%}
                    <div class="product-form">
                      <div class="product-form__buttons form">
                        <button
                          type="submit"
                          name="add"
                          class="product-form__submit button button--full-width button--primary"
                          disabled
                        >
                          {{ 'products.product.sold_out' | t }}
                        </button>
                      </div>
                    </div>
                  {%- endif -%}
                </div>
              {%- when 'custom_liquid' -%}
                {{ block.settings.custom_liquid }}
              {%- when 'rating' -%}
                {%- if product.metafields.reviews.rating.value != blank -%}
                  {% liquid
                    assign rating_decimal = 0
                    assign decimal = product.metafields.reviews.rating.value.rating | modulo: 1
                    if decimal >= 0.3 and decimal <= 0.7
                    assign rating_decimal = 0.5
                  elsif decimal > 0.7
                    assign rating_decimal = 1
                    endif
                  %}
                  <div class="rating" role="img" aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: product.metafields.reviews.rating.value, rating_max: product.metafields.reviews.rating.value.scale_max }}">
                    <span aria-hidden="true" class="rating-star color-icon-{{ settings.accent_icons }}" style="--rating: {{ product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"></span>
                  </div>
                  <p class="rating-text caption">
                    <span aria-hidden="true">{{ product.metafields.reviews.rating.value }} / {{ product.metafields.reviews.rating.value.scale_max }}</span>
                  </p>
                  <p class="rating-count caption">
                    <span aria-hidden="true">({{ product.metafields.reviews.rating_count }})</span>
                    <span class="visually-hidden">{{ product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}</span>
                  </p>
                {%- endif -%}
              {%- endcase -%}
            {%- endfor -%}
          </div>
        </div>
      </div>
  
    </div>
    <product-modal id="ProductModal-{{ section.id }}" class="product-media-modal media-modal">
      <div class="product-media-modal__dialog" role="dialog" aria-label="{{ 'products.modal.label' | t }}" aria-modal="true" tabindex="-1">
        <button id="ModalClose-{{ section.id }}" type="button" class="product-media-modal__toggle" aria-label="{{ 'accessibility.close' | t }}">{% render 'icon-close' %}</button>

        <div class="product-media-modal__content" role="document" aria-label="{{ 'products.modal.label' | t }}" tabindex="0">
          {%- liquid
            if product.selected_or_first_available_variant.featured_media != null
              assign media = product.selected_or_first_available_variant.featured_media
              render 'product-media', media: media, loop: section.settings.enable_video_looping, variant_image: section.settings.hide_variants
            endif
          -%}

          {%- for media in product.media -%}
            {%- liquid
              if section.settings.hide_variants and media_to_render contains media.id
                assign variant_image = true
              else
                assign variant_image = false
              endif

              unless media.id == product.selected_or_first_available_variant.featured_media.id
                render 'product-media', media: media, loop: section.settings.enable_video_looping, variant_image: variant_image
              endunless
            -%}
          {%- endfor -%}
        </div>
      </div>
    </product-modal>
  </div>
</section>

{% javascript %}
  if (!customElements.get('product-modal')) {
    customElements.define('product-modal', class ProductModal extends ModalDialog {
      constructor() {
        super();
      }

      hide() {
        super.hide();
      }

      show(opener) {
        super.show(opener);
        this.showActiveMedia();
      }

      showActiveMedia() {
        this.querySelectorAll(`[data-media-id]:not([data-media-id="${this.openedBy.getAttribute("data-media-id")}"])`).forEach((element) => {
            element.classList.remove('active');
          }
        )
        const activeMedia = this.querySelector(`[data-media-id="${this.openedBy.getAttribute("data-media-id")}"]`);
        const activeMediaTemplate = activeMedia.querySelector('template');
        const activeMediaContent = activeMediaTemplate ? activeMediaTemplate.content : null;
        activeMedia.classList.add('active');
        activeMedia.scrollIntoView();

        const container = this.querySelector('[role="document"]');
        container.scrollLeft = (activeMedia.width - container.clientWidth) / 2;

        if (activeMedia.nodeName == 'DEFERRED-MEDIA' && activeMediaContent && activeMediaContent.querySelector('.js-youtube'))
          activeMedia.loadContent();
      }
    });
  }
{% endjavascript %}
<script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
{%- if first_3d_model -%}
  <script type="application/json" id="ProductJSON-{{ product.id }}">
    {{ product.media | where: 'media_type', 'model' | json }}
  </script>
  <script src="{{ 'product-model.js' | asset_url }}" defer></script>
{%- endif -%}

{% comment %}
<script type="application/ld+json">
  {
    "@context": "http://schema.org/",
    "@type": "Product",
    "name": {{ product.title | json }},
    "url": {{ shop.url | append: product.url | json }},
    {%- if product.selected_or_first_available_variant.featured_media -%}
      {%- assign media_size = product.selected_or_first_available_variant.featured_media.preview_image.width | append: 'x' -%}
      "image": [
        {{ product.featured_media | img_url: media_size | prepend: "https:" | json }}
      ],
    {%- endif -%}
    "description": {{ product.description | strip_html | json }},
    {%- if product.selected_or_first_available_variant.sku != blank -%}
      "sku": {{ product.selected_or_first_available_variant.sku | json }},
    {%- endif -%}
    "brand": {
      "@type": "Thing",
      "name": {{ product.vendor | json }}
    },
    "offers": [
      {%- for variant in product.variants -%}
        {
          "@type" : "Offer",
          {%- if variant.sku != blank -%}
            "sku": {{ variant.sku | json }},
          {%- endif -%}
          "availability" : "http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}",
          "price" : {{ variant.price | divided_by: 100.00 | json }},
          "priceCurrency" : {{ cart.currency.iso_code | json }},
          "url" : {{ shop.url | append: variant.url | json }}
        }{% unless forloop.last %},{% endunless %}
      {%- endfor -%}
    ]
  }
</script>
{% endcomment %}

<script>
  document.addEventListener('DOMContentLoaded', function() {
    function isIE() {
      const ua = window.navigator.userAgent;
      const msie = ua.indexOf('MSIE ');
      const trident = ua.indexOf('Trident/');

      return (msie > 0 || trident > 0);
    }

    if (!isIE()) return;
    const hiddenInput = document.querySelector('#{{ product_form_id }} input[name="id"]');
    const noScriptInputWrapper = document.createElement('div');
    const variantSwitcher = document.querySelector('variant-all[data-section="{{ section.id }}"]') || document.querySelector('variant-selects[data-section="{{ section.id }}"]');
    noScriptInputWrapper.innerHTML = document.querySelector('.product-form__noscript-wrapper-{{ section.id }}').textContent;
    variantSwitcher.outerHTML = noScriptInputWrapper.outerHTML;

    document.querySelector('#Variants-{{ section.id }}').addEventListener('change', function(event) {
      hiddenInput.value = event.currentTarget.value;
    });
  });
</script>
  
 <script>
  $(window).ready(function() {

$('#size_on [data-size]').hide();

  var size_variants = document.getElementById('size_label').innerHTML.replace(/(^\s*)|(\s*$)/g, "" ).replace(" ","_");

  var size_attribute = $('#size_on [data-size="' + size_variants + '"]');

  size_attribute.show();

})
</script> 

{% schema %}
{
  "name": "Tenways product",
  "tag": "section",
  "class": "featured-product-section spaced-section spaced-section--full-width",
  "blocks": [
    {
      "type": "text",
      "name": "t:sections.featured-product.blocks.text.name",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "default": "Text block",
          "label": "t:sections.featured-product.blocks.text.settings.text.label"
        },
        {
            "type": "richtext",
            "id": "richtext",
            "default": "<p>richtext</p>",
            "label": "Product title"
        },
        {
          "type": "select",
          "id": "text_style",
          "options": [
            {
              "value": "body",
              "label": "t:sections.featured-product.blocks.text.settings.text_style.options__1.label"
            },
            {
              "value": "subtitle",
              "label": "t:sections.featured-product.blocks.text.settings.text_style.options__2.label"
            },
            {
              "value": "uppercase",
              "label": "t:sections.featured-product.blocks.text.settings.text_style.options__3.label"
            }
          ],
          "default": "body",
          "label": "t:sections.featured-product.blocks.text.settings.text_style.label"
        },
       {
          "type": "richtext",
          "id": "p_des",
          "label": "Tenways love"
        },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    }
      ]
    },
    {
      "type": "title",
      "name": "t:sections.featured-product.blocks.title.name",
      "limit": 1
    },
    {
      "type": "price",
      "name": "t:sections.featured-product.blocks.price.name",
      "limit": 1,
      "settings": [
      {
      "type": "richtext",
      "id": "shipping",
      "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
      "label": "Shipping"
    }
    ]
    },
    {
      "type": "quantity_selector",
      "name": "t:sections.featured-product.blocks.quantity_selector.name",
      "limit": 1
    },
    {
      "type": "variant_picker",
      "name": "t:sections.featured-product.blocks.variant_picker.name",
      "limit": 1,
      "settings": [
        {
          "type": "select",
          "id": "picker_type",
          "options": [
            {
              "value": "dropdown",
              "label": "t:sections.featured-product.blocks.variant_picker.settings.picker_type.options__1.label"
            },
            {
              "value": "button",
              "label": "t:sections.featured-product.blocks.variant_picker.settings.picker_type.options__2.label"
            }
          ],
          "default": "button",
          "label": "t:sections.featured-product.blocks.variant_picker.settings.picker_type.label"
        }
      ]
    },
    {
      "type": "buy_buttons",
      "name": "t:sections.featured-product.blocks.buy_buttons.name",
      "limit": 1,
      "settings": [
        {
          "type": "checkbox",
          "id": "show_dynamic_checkout",
          "default": true,
          "label": "t:sections.featured-product.blocks.buy_buttons.settings.show_dynamic_checkout.label",
          "info": "t:sections.featured-product.blocks.buy_buttons.settings.show_dynamic_checkout.info"
        }
      ]
    },
    {
      "type": "share",
      "name": "t:sections.featured-product.blocks.share.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "share_label",
          "label": "t:sections.featured-product.blocks.share.settings.text.label",
          "default": "Share"
        },
        {
          "type": "paragraph",
          "content": "t:sections.featured-product.blocks.share.settings.featured_image_info.content"
        },
        {
          "type": "paragraph",
          "content": "t:sections.featured-product.blocks.share.settings.title_info.content"
        }
      ]
    },
    {
      "type": "custom_liquid",
      "name": "t:sections.featured-product.blocks.custom_liquid.name",
      "settings": [
        {
          "type": "liquid",
          "id": "custom_liquid",
          "label": "t:sections.featured-product.blocks.custom_liquid.settings.custom_liquid.label"
        }
      ]
    },
    {
      "type": "rating",
      "name": "t:sections.featured-product.blocks.rating.name",
      "limit": 1,
      "settings": [
        {
          "type": "paragraph",
          "content": "t:sections.featured-product.blocks.rating.settings.paragraph.content"
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "product",
      "id": "product",
      "label": "t:sections.featured-product.settings.product.label"
    },
    {
      "type": "checkbox",
      "id": "secondary_background",
      "default": false,
      "label": "t:sections.featured-product.settings.secondary_background.label"
    },
    {
      "type": "header",
      "content": "t:sections.featured-product.settings.header.content",
      "info": "t:sections.featured-product.settings.header.info"
    },
    {
      "type": "checkbox",
      "id": "hide_variants",
      "default": false,
      "label": "t:sections.main-product.settings.hide_variants.label"
    },
    {
      "type": "checkbox",
      "id": "enable_video_looping",
      "default": false,
      "label": "t:sections.featured-product.settings.enable_video_looping.label"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "adapt"
        },
        {
          "value": "portrait",
          "label": "portrait"
        },
        {
          "value": "square",
          "label": "square"
        }
      ],
      "default": "adapt",
      "label": "adapt"
    },
  {
      "type": "header",
      "content": "FREE Accessories"
    },
    {
      "type": "checkbox",
      "id": "show_cart_accessories",
      "default": false,
      "label": "Show Accessories"
    },
    {
      "type": "collection",
      "id": "collection",
      "label": "Collection"
    },
    {
      "type": "text",
      "id": "collection_title",
      "label": "Featured collection"
    },
   {
       "type": "richtext",
      "id": "text_des",
      "label": "Des"
    },
    {
      "type": "richtext",
      "id": "text",
      "label": "Remark"
    },
    {
      "type": "text",
      "id": "free",
      "label": "Free"
    },
   {
      "type": "text",
      "id": "size_label1",
      "label": "Size label1",
      "default": "For rider height - >195 cm(>6'4)"      

    },
    {
      "type": "text",
      "id": "size_label2",
      "label": "Size label2",
      "default": "For rider height - 180~200 cm(5'9 ~ 6'6)"
    },
    {
      "type": "text",
      "id": "size_label3",
      "label": "Size label3",
      "default": "For rider height - 165~185 cm(5'4 ~ 5'9)"
    },
    {
      "type": "text",
      "id": "size_label4",
      "label": "Size label4",
       "default": "For rider height - 160~170 cm(4'9 ~ 5'6)"
    },
    {
      "type": "text",
      "id": "more",
      "label": "Explore more",
      "default": "Explore more"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "button_link"
    }
  ],
  "presets": [
    {
      "name": "Tenways product",
      "blocks": [
        {
          "type": "text",
          "settings": {
            "text": "{{ section.settings.product.vendor }}",
            "text_style": "uppercase"
          }
        },
        {
          "type": "title"
        },
        {
          "type": "text",
          "settings": {
            "text": "{{ section.settings.product.metafields.descriptors.subtitle.value }}",
            "text_style": "subtitle"
          }
        },
        {
          "type": "price"
        },
        {
          "type": "variant_picker"
        },
        {
          "type": "quantity_selector"
        },
        {
          "type": "buy_buttons"
        },
        {
          "type": "share"
        }
      ]
    }
  ]
}
{% endschema %}
